<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
        	*{
        		outline:none;
        	}
        </style>
    </head>
    <body>
		<div ng-app="myApp" >
			<div ng-controller="goods">
            <h1 class="text-center">手机商城</h1>
            <h2 class="text-center"><span id="username" ng-cloak></span>,欢饮您</h2>
		      <div class="row">
              <div class="col-sm-3 col-md-3 col-lg-3 col-xs-3">
                <div class="thumbnail">
                  <img src="images/iphone.jpg" alt="">
                  <div class="caption">
                    <h3>iphone</h3>
                    <p>￥5000</p>
                    <p><button class="btn btn-primary" role="button" ng-click="ipadd($event)">+</button> <span ng-cloak>已购数量{{ipquantity}}</span><button class="btn btn-danger" ng-click="ipreduce()" role="button">-</button></p>
                  </div>
                </div>
              </div>
              <div class="col-sm-3 col-md-3 col-lg-3 col-xs-3">
                <div class="thumbnail">
                  <img src="images/xiaomi.jpg" alt="">
                  <div class="caption">
                    <h3>小米</h3>
                    <p>￥2500</p>
                    <p>
                        <button class="btn btn-primary" role="button" ng-click="xmadd()">+</button><span ng-cloak>已购数量{{xmquantity}} </span>
                        <button ng-click="xmreduce()" class="btn btn-danger" role="button">-</button>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-sm-3 col-md-3 col-lg-3 col-xs-3">
                <div class="thumbnail">
                  <img src="images/sanxing.jpg" alt="">
                  <div class="caption">
                    <h3>三星</h3>
                    <p>￥4500</p>
                    <p><button class="btn btn-primary" ng-click="sxadd()" role="button">+</button><span ng-cloak>已购数量{{sxquantity}} </span><button ng-click="sxreduce()" class="btn btn-danger" role="button">-</button></p>
                  </div>
                </div>
              </div>
              <div class="col-sm-3 col-md-3 col-lg-3 col-xs-3">
                <div class="thumbnail">
                  <img src="images/rongyao.jpg" alt="">
                  <div class="caption">
                    <h3>华为荣耀</h3>
                    <p>￥3000</p>
                    <p><button class="btn btn-primary" ng-click="hwadd()" role="button">+</button><span ng-cloak>已购数量{{hwquantity}}</span> <button ng-click="hwreduce()" class="btn btn-danger" role="button">-</button></p>
                  </div>
                </div>
              </div>
            </div>
            <strong ng-cloak>总数:{{quantity}}</strong><br>
            <button class="btn btn-danger" ng-click="buy()">购买</button>
            <button type="button" ng-click="goshopcar()" class="btn btn-info pull-right">查看我的购物车</button>
		  </div>
		</div>
	
	<script src='js/jquery-1.11.1.js'></script>
    <script src="js/angular.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    		var app = angular.module('myApp',[]);
    		app.controller('goods',function($scope){
                angular.element('#username').text(localStorage.getItem('username'))
                 $scope.ipquantity = 0;
                 $scope.sxquantity = 0;
                 $scope.xmquantity = 0;
                 $scope.hwquantity = 0;
    			$scope.ipadd = function(){
                    $scope.ipquantity += 1;
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.ipreduce = function(){
                    
                    if($scope.ipquantity>0){
                       $scope.ipquantity -= 1; 
                   }else{
                        return ;
                   }
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.sxadd = function(){
                    $scope.sxquantity += 1;
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.sxreduce = function(){
                    if($scope.sxquantity>0){
                       $scope.sxquantity -= 1; 
                   }else{
                        return ;
                   }
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.xmadd = function(){
                    $scope.xmquantity += 1;
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.xmreduce = function(){
                     if($scope.xmquantity>0){
                       $scope.xmquantity -= 1; 
                   }else{
                        return ;
                   }
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.hwadd = function(){
                    $scope.hwquantity += 1;
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.hwreduce = function(){
                    if($scope.hwquantity>0){
                       $scope.hwquantity -= 1; 
                   }else{
                        return ;
                   }
                    $scope.quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                }
                $scope.goshopcar = function(){
                  window.location.href="http://localhost:3000/shopcar"
                }
                $scope.buy = function(){
                    let quantity = $scope.hwquantity+$scope.xmquantity+$scope.sxquantity+$scope.ipquantity
                    let allprice = $scope.hwquantity*3000 + $scope.xmquantity*2500 + $scope.sxquantity*4500 + $scope.ipquantity*5000;
                    let hwquantity = $scope.hwquantity
                    let ipquantity = $scope.ipquantity
                    let sxquantity = $scope.sxquantity
                    let xmquantity = $scope.xmquantity 
                    let ipprice = $scope.ipquantity*5000
                    let xmprice = $scope.xmquantity*2500
                    let sxprice = $scope.sxquantity*4500
                    let hwprice = $scope.hwquantity*3000 
                    let username = localStorage.getItem('username')
                    let data = {
                        allprice:allprice,
                        quantity:quantity,
                        hwquantity:hwquantity,
                        ipquantity:ipquantity,
                        sxquantity:sxquantity,
                        xmquantity:xmquantity,
                        ipprice:ipprice,
                        xmprice:xmprice,
                        sxprice:sxprice,
                        hwprice:hwprice,
                        username:username
                    }
                    $.post('http://localhost:3000/buy',data,function(data,textStatus,xhr){
                        if(String(data)=="success"){
                            alert('购买成功')
                        }
                    })

                }   

    		})
    </script>
    </body>
</html>